<template>
  <div>
    <panel>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <!-- <el-tab-pane label="最近" name="lately">
          <LatelyTab :data="state.lately" />
        </el-tab-pane> -->
        <el-tab-pane label="文章" name="blog">
          <!-- <BlogTab :data="state.blog" /> -->
          <div class="list">
            <div v-for="item in state.blog" :key="item.id" class="list-item">
              <router-link :to="`/blog/${item.id}`">
                <h2 class="list-item-title">{{ item.title }}</h2>
              </router-link>
              <div class="list-item-info">
                <span
                  ><el-icon><Edit /></el-icon>{{ item.likeCount }}</span
                >
                <span>
                  <el-icon><RefreshRight /></el-icon>更新于{{
                    formatDate(item.updateTime)
                  }}
                </span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="游戏" name="game">
          <el-empty
            :image-size="200"
            v-if="state.game.length == 0"
            description="开发中"
          />
        </el-tab-pane>
      </el-tabs>
    </panel>
  </div>
</template>

<script setup lang="ts">
import type { TabsPaneContext } from "element-plus";
import { ref, onMounted, computed, getCurrentInstance, watch } from "vue";
import Panel from "@/components/Panel.vue";
import LatelyTab from "./LatelyTab.vue";
import BlogTab from "./BlogTab.vue";
import GameTab from "./GameTab.vue";
import { listBlogByUser } from "@/api/blog";
import { listGameInfo } from "@/api/game";
import { useRoute } from "vue-router";
import { RouterLink } from "vue-router";

const activeName = ref("blog");

const state = ref({
  lately: <any>[],
  blog: <any>[],
  game: <any>[],
});

const pageQuery = ref<any>({
  // lately: {
  //   page: 1,
  //   size: 10,
  // },
  blog: {
    page: 1,
    size: 10,
    total: 0,
    pages: 0,
  },
  game: {
    page: 1,
    size: 10,
    total: 0,
    pages: 0,
  },
});

const route = useRoute();

const { proxy } = <any>getCurrentInstance();

const props = defineProps({
  id: {
    type: [String, Number],
    required: true,
  },
});

const userName = computed(() => {
  return route.params.userName.toString();
}).value;

watch(
  () => props.id,
  (val) => {
    console.log("load");

    loadBlog();
    loadGame();
  }
);

const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event);
};

function loadBlog(id = props.id) {
  console.log("load Blog");

  const { blog } = pageQuery.value;
  // 获取最近事件
  // 获取博客信息
  listBlogByUser(id, blog.page, blog.size).then((res) => {
    console.log(res);

    if (res.code !== 200) return;
    const { current, pages, total, records } = res.data;
    state.value.blog.push(...records);

    console.log(state.value);

    console.log(pageQuery.blog);
    blog.page = current;
    blog.total = total;
    blog.pages = pages;
  });
}

function loadGame(id = props.id) {
  const { game } = pageQuery.value;
  // 获取游戏信息
  listGameInfo(userName, game.page, game.size).then((res: any) => {
    if (!res.status) return;
    const { current, pages, total, records } = res.data;
    state.value.blog.push(...records);
    pageQuery.game.page = current;
    pageQuery.game.total = total;
    pageQuery.game.page = current;
    pageQuery.game.pages = pages;
  });
}
</script>

<style scoped>
.demo-tabs {
  height: auto;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.list {
  list-style: none;
}

.list-item {
  display: list-item;
}

.list-item-title:hover {
  color: var(--app-main-color);
  text-decoration: underline;
}

.list-item-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  color: #6b778c;
}
</style>
